<!doctype html>


<html>
<head>
  <link rel="shortcut icon" href="static/images/favicon.ico" type="image/x-icon">
  <title>containerrenderer.js (Closure Library API Documentation - JavaScript)</title>
  <link rel="stylesheet" href="static/css/base.css">
  <link rel="stylesheet" href="static/css/doc.css">
  <link rel="stylesheet" href="static/css/sidetree.css">
  <link rel="stylesheet" href="static/css/prettify.css">

  <script>
     var _staticFilePath = "static/";
     var _typeTreeName = "goog";
     var _fileTreeName = "Source";
  </script>

  <script src="static/js/doc.js">
  </script>


  <meta charset="utf8">
</head>

<body onload="grokdoc.onLoad();">

<div id="header">
  <div class="g-section g-tpl-50-50 g-split">
    <div class="g-unit g-first">
      <a id="logo" href="index.html">Closure Library API Documentation</a>
    </div>

    <div class="g-unit">
      <div class="g-c">
        <strong>Go to class or file:</strong>
        <input type="text" id="ac">
      </div>
    </div>
  </div>
</div>





<div class="colmask rightmenu">
<div class="colleft">
    <div class="col1">
      <!-- Column 1 start -->

<div id="title">
       <span class="fn">containerrenderer.js</span>
</div>

<div class="g-section g-tpl-75-25">
  <div class="g-unit g-first" id="description">
    <span class='nodesc'>No description.</span>
  </div>
  

        <div class="g-unit" id="useful-links">
          <div class="title">Useful links</div>
          <ol>
            <li><a href="local_closure_goog_ui_containerrenderer.js.source.html"><span class='source-code-link'>Source Code</span></a></li>
            <li><a href="http://code.google.com/p/closure-library/source/browse/local/closure/goog/ui/containerrenderer.js">Git</a></li>
          </ol>
        </div>
</div>

<h2 class="g-first">File Location</h2>
  <div class="g-section g-tpl-20-80">
    <div class="g-unit g-first">
      <div class="g-c-cell code-label">/goog/ui/containerrenderer.js</div>
    </div>
  </div>
<hr/>


  <h2>Classes</h2>
 <div class="fn-constructor">
        <a href="class_goog_ui_ContainerRenderer.html">
          goog.ui.ContainerRenderer</a><br/>
        <div class="class-details">Default renderer for <code> goog.ui.Container</code>.  Can be used as-is, but
subclasses of Container will probably want to use renderers specifically
tailored for them by extending this class.
</div>
 </div>
      
<br/>

  <div class="legend">
        <span class="key publickey"></span><span>Public</span>
        <span class="key protectedkey"></span><span>Protected</span>
        <span class="key privatekey"></span><span>Private</span>
  </div>









<div class="section">
  <table class="horiz-rule">


  </table>
</div>




  <h2>Global Functions</h2>





<div class="section">
  <table class="horiz-rule">


     <tr class="even entry public">
       <td class="access"></td>






  <td>
    <a name="goog.ui.ContainerRenderer.getCustomRenderer&renderer.getCssClass"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.ui.ContainerRenderer.getCustomRenderer&renderer.</span><span class="entryName">getCssClass<span class="args">()</span>
        </span>
        &#8658; <span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span>
      </div>


     <div class="entryOverview">
       Returns the CSS class to be applied to the root element of components
rendered using this renderer.

     </div>


    <! -- Method details -->
    <div class="entryDetails">

   
      <div class="detailsSection">
        <b>Returns:</b>&nbsp;<span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span>&nbsp;
            Renderer-specific CSS class.
      </div>
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_ui_containerrenderer.js.source.html#line90">code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry public">
       <td class="access"></td>






  <td>
    <a name="goog.ui.ContainerRenderer.getCustomRenderer"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.ui.ContainerRenderer.</span><span class="entryName">getCustomRenderer<span class="args">(<span class="arg">ctor</span>,&nbsp;<span class="arg">cssClassName</span>)</span>
        </span>
        &#8658; <span class="type"><a href="class_goog_ui_ContainerRenderer.html">goog.ui.ContainerRenderer</a></span>
      </div>


     <div class="entryOverview">
       Constructs a new renderer and sets the CSS class that the renderer will use
as the base CSS class to apply to all elements rendered by that renderer.
An example to use this function using a menu is:

<pre class="lang-js prettyprint">
var myCustomRenderer = goog.ui.ContainerRenderer.getCustomRenderer(
    goog.ui.MenuRenderer, 'my-special-menu');
var newMenu = new goog.ui.Menu(opt_domHelper, myCustomRenderer);
</pre>

Your styles for the menu can now be:
<pre class="lang-js prettyprint">
.my-special-menu { }
</pre><em>instead</em> of
<pre class="lang-js prettyprint">
.CSS_MY_SPECIAL_MENU .goog-menu { }
</pre>

You would want to use this functionality when you want an instance of a
component to have specific styles different than the other components of the
same type in your application.  This avoids using descendant selectors to
apply the specific styles to this component.


     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">ctor</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Function">Function</a></span>
        <div class="entryOverview">The constructor of the renderer you want to create.</div>
     </td>
   </tr>
     
   <tr class="odd">
     <td>
        <span class="entryName">cssClassName</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span>
        <div class="entryOverview">The name of the CSS class for this renderer.</div>
     </td>
   </tr>
  </table>
      </div>
   
      <div class="detailsSection">
        <b>Returns:</b>&nbsp;<span class="type"><a href="class_goog_ui_ContainerRenderer.html">goog.ui.ContainerRenderer</a></span>&nbsp;
            An instance of the desired renderer with
    its getCssClass() method overridden to return the supplied custom CSS
    class name.
      </div>
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_ui_containerrenderer.js.source.html#line82">code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry public">
       <td class="access"></td>






  <td>
    <a name="goog.ui.ContainerRenderer.getInstance"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.ui.ContainerRenderer.</span><span class="entryName">getInstance<span class="args">()</span>
        </span>
      </div>


     <div class="entryOverview">
       <span class='nodesc'>No description.</span>
     </div>

   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_ui_containerrenderer.js.source.html#line42">code &raquo;</a>
  </td>
     </tr>


  </table>
</div>






      <!-- Column 1 end -->
    </div>

        <div class="col2">
          <!-- Column 2 start -->
          <div class="col2-c">
            <h2 id="ref-head">Directory ui</h2>
            <div id="localView"></div>
          </div>

          <div class="col2-c">
            <h2 id="ref-head">File Reference</h2>
            <div id="sideFileIndex" rootPath="" current="/goog/ui/containerrenderer.js"></div>
          </div>
          <!-- Column 2 end -->
        </div>
</div>
</div>

</body>
</html>
